"use client"; // 必须添加，因为使用了 useState 和 onClick

import { useState } from "react";
import Image from "next/image";

export default function PhotoGallery() {
  const images = [
    "https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749625982939.jpg", // 替换为实际路径
    "https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749625991788.jpg", // 替换为实际路径
    "https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749626001375.jpg", // 替换为实际路径
    "https://cdnoss.kaoshixing.com/ksx_prod/618654/background/618654/20250611/1749626060678.jpg", // 替换为实际路径
  ];

  // const [selectedImage, setSelectedImage] = useState(null);
  const [selectedImage, setSelectedImage] = useState<string | null>(null);

  return (
    <div className="container mx-auto px-4 py-8">
      <h1 className="text-3xl font-bold text-center mb-8 text-red-700">网络主播合规管控培训相关文件</h1>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
        {images.map((src, index) => (
          <div
            key={index}
            className="relative aspect-[4/6] rounded-lg overflow-hidden shadow-lg cursor-pointer"
            onClick={() => setSelectedImage(src)}
          >
            <Image
              src={src}
              alt={`文件 ${index + 1}`}
              fill
              className="object-cover"
            />
          </div>
        ))}
      </div>

      {/* 放大查看的模态框 */}
      {selectedImage && (
        <div
          className="fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center p-4 z-50"
          onClick={() => setSelectedImage(null)}
        >
          <div className="relative w-full max-w-4xl h-full max-h-[90vh]">
            <Image
              src={selectedImage}
              alt="放大图片"
              fill
              className="object-contain"
            />
          </div>
        </div>
      )}
    </div>
  );
}